<template>
	<view class="wrapper">
		<button class="auth-button" @click="getLocation">获取定位信息</button>
		<view>经度：{{longitude}}</view>
		<view>纬度：{{latitude}}</view>
		<view>高度：{{altitude}}</view>
		<view>速度：{{speed}}</view>
		<view class="label-title label-title-text">地图选点</view>
		<view class="input-wrapper">	
			<view class="input-label">经度：</view>
			<input v-model="mapLongitude"/>
			<view class="input-label">纬度：</view>
			<input v-model="mapLatitude"/>
		</view>
		<button class="auth-button" @click="chooseLocation">打开地图选择位置</button>
		<view>经度：{{mapLongitude}}</view>
		<view>纬度：{{mapLatitude}}</view>
		<view>位置名称：{{adressName}}</view>
		<view>详细地址：{{adressDetail}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				longitude: '',		// 经度
				latitude: '',		// 纬度
				altitude: '',		// 高度
				speed: '',			// 速度
				mapLongitude: '',	// 地图选点用经度
				mapLatitude: '',	// 地图选点用纬度
				adressName: '',		// 地址名称
				adressDetail: ''	// 详细地址
			}
		},
		onLoad() {
			this.getLocation();
		},
		methods: {
			// 获取定位信息
			getLocation() {
				let that = this;
				uni.showLoading();
				uni.getLocation({
					type: 'wgs84',
					altitude: true,
					success: function (res) {
						uni.hideLoading();
						that.longitude = res.longitude;
						that.mapLongitude = res.longitude;
						that.latitude = res.latitude;
						that.mapLatitude = res.latitude;
						that.altitude = res.altitude;
						that.speed = res.speed;
					},
					fail:function(res){
						uni.hideLoading();
						if(res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '请前往设置界面，允许获取位置信息',
								success: function (res) {
									if (res.confirm) {
										// 打开设置界面
										wx.openSetting({
										  success (res) {
											// 返回信息包括用户是否同意授权
										    console.log(res.authSetting)
										  }
										})
									}
								}
							})
						}
					}
				});
			},
			chooseLocation() {
				let that = this;
				uni.chooseLocation({
					longitude: that.mapLongitude,
					latitude: that.mapLatitude,
				    success: function (res) {
						console.log(res);
						that.adressName = res.name;
						that.adressDetail = res.address;
						that.mapLongitude = res.longitude;
						that.mapLatitude = res.latitude;
				    },
					fail:function(res){
						console.log(res);
						uni.hideLoading();
						if(res.errMsg == "chooseLocation:fail auth deny") {
							uni.showModal({
								content: '请前往设置界面，允许获取位置信息',
								success: function (res) {
									if (res.confirm) {
										// 打开设置界面
										wx.openSetting({
										  success (res) {
											// 返回信息包括用户是否同意授权
										    console.log(res.authSetting)
										  }
										})
									}
								}
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.wrapper {
		text-align: center;
	}
	
	.auth-button {
		width: 80%;
		margin: 58rpx auto 70rpx auto;
	}
	
	.label-title {
		width: 78%;
		margin: 56rpx 85rpx 60rpx 85rpx;
		border-bottom: solid 1px #8f8f94;
	}
	
	.label-title-text {
		color: #8f8f94;
		font-size: 41rpx;
		text-align: left;
	}
	
	.input-wrapper {
		display: flex;
		padding: 85rpx;
	}
	
	input {
		background-color: #F8F8F8;
		width: 30%;
	}
</style>
